<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
       <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
       <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   -->
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        @-ms-viewport {
            width: 980px;
        }

        .main {
            width: 980px;
            margin: auto;
        }

        .table-center {
            width: 100%;
            margin: auto;
            text-align: center;
            vertical-align: middle;
        }

        .th-center {
            text-align: center;
        }

    </style>

    <script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('appController', function ($scope, $http) {

            $scope.sortIsAsc = true;

            //数据
            $scope.overitemlist = [
                {
                    "id": 6,
                    "phone": "18832030507",
                    "itemId": 160808001,
                    "yesNum": 1,
                    "noNum": 0,
                    "sumFlow": 3,
                    "overtime": "2016-09-12 21:11:53"
                },
                {
                    "id": 7,
                    "phone": "18832030507",
                    "itemId": 160808001,
                    "yesNum": 1,
                    "noNum": 0,
                    "sumFlow": 5,
                    "overtime": "2016-09-12 21:22:53"
                },
                {
                    "id": 8,
                    "phone": "18832030507",
                    "itemId": 160808001,
                    "yesNum": 0,
                    "noNum": 0,
                    "sumFlow": 6,
                    "overtime": "2016-09-19 16:33:00"
                },
                {
                    "id": 11,
                    "phone": "18832030507",
                    "itemId": 160808001,
                    "yesNum": 1,
                    "noNum": 0,
                    "sumFlow": 7,
                    "overtime": "2016-09-12 21:44:53"
                },
                {
                    "id": 12,
                    "phone": "18832030507",
                    "itemId": 160808001,
                    "yesNum": 1,
                    "noNum": 0,
                    "sumFlow": 8,
                    "overtime": "2016-09-12 21:55:53"
                },
                {
                    "id": 123,
                    "phone": "18832030507",
                    "itemId": 160808001,
                    "yesNum": 0,
                    "noNum": 0,
                    "sumFlow": 9,
                    "overtime": "2016-09-19 16:56:00"
                },
                {
                    "id": 124,
                    "phone": "18832030507",
                    "itemId": 160808000,
                    "yesNum": 0,
                    "noNum": 3,
                    "sumFlow": 0,
                    "overtime": "2016-09-19 19:58:20"
                }
            ];

            $scope.toggleSortByFlow = function () {
                $scope.sortIsAsc = !$scope.sortIsAsc;
                $scope.overitemlist.sort(function (a, b) {
                    if ($scope.sortIsAsc) {
                        if (a.sumFlow < b.sumFlow) {
                            return -1;
                        }
                        if (a.sumFlow === b.sumFlow) {
                            return 0;
                        }
                        return 1;
                    }
                    if (a.sumFlow > b.sumFlow) {
                        return -1;
                    }
                    if (a.sumFlow === b.sumFlow) {
                        return 0;
                    }
                    return 1;
                });
            };

            $scope.toggleSortByTime = function () {
                $scope.sortIsAsc = !$scope.sortIsAsc;
                $scope.overitemlist.sort(function (a, b) {
                    if ($scope.sortIsAsc) {
                        if (a.overtime < b.overtime) {
                            return -1;
                        }
                        if (a.overtime === b.overtime) {
                            return 0;
                        }
                        return 1;
                    }
                    if (a.overtime > b.overtime) {
                        return -1;
                    }
                    if (a.overtime === b.overtime) {
                        return 0;
                    }
                    return 1;
                });
            };
        });
    </script>

</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand">2016年09月20日 用户答题情况表</a>
        </div>
    </div>
</nav>

<div class="main">

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">基本信息</h3>
        </div>
        <div class="panel-body">
            <table class="table table-hover table-center">
                <thead>
                <tr>
                    <th class="th-center">项目</th>
                    <th class="th-center">数量</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>总用户量</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>日答题量</td>
                    <td>50</td>
                </tr>
                <tr>
                    <td>日推送总流量</td>
                    <td>300M</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">昨日答题信息</h3>
        </div>
        <div class="panel-body" ng-app="app" ng-controller="appController">
            <table class="table table-hover table-center">
                <caption><span style="color:red">点击“获得流量”和“完成时间”可对列表进行排序</span></caption>
                <thead>
                <tr>
                    <th class="th-center">序号</th>
                    <th class="th-center">用户手机</th>
                    <th class="th-center">题目序号</th>
                    <th class="th-center">正确个数</th>
                    <th class="th-center">错误个数</th>
                    <th class="th-center"><a ng-click="toggleSortByFlow()">获得流量</a></th>
                    <th class="th-center"><a ng-click="toggleSortByTime()">完成时间</a></th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="x in overitemlist">
                    <td>{{x.id}}</td>
                    <td>{{x.phone}}</td>
                    <td>{{x.itemId}}</td>
                    <td>{{x.yesNum}}</td>
                    <td>{{x.noNum}}</td>
                    <td>{{x.sumFlow}}</td>
                    <td>{{x.overtime}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>